import styled from 'styled-components'

export const Container = styled.div`
    height: 100vh;
    overflow-y: auto;
    background-color: ${props=>props.theme.bgColor};
`

export const Header = styled.div`
    width: 100%;
    height: 60px;
    border-bottom: 1px solid ${props=>props.theme.headerBorderColor};
    position: fixed;
    top: 0;
    z-index: 99;
    background-color: ${props=>props.theme.headerBgColor};
    box-shadow: 0 2px 8px ${props=>props.theme.cardShadowColor};
    @media (max-width: 1200px) {
        height: 50px;
        box-shadow: none;
    }
    .nav-c{
        max-width: 1252px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        @media (max-width: 1200px) {
            justify-content: space-between;
            padding: 0 20px;
        }
        .title-name{
            font-weight: bold;
            font-size: 22px;
            color: ${props=>props.theme.headerTitle};
            position: absolute;
            width: 80%;
            height: 1em;
            line-height: 1em;
            padding-left: 80px;
            left: 0;
            top: calc(50% - 0.5em);
            @media (max-width: 1200px) {
                font-size: 16px;
                width: 65%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                padding-left: 16px;
            }
            &.show{
                transform: translateY(0);
                opacity: 1;
                transition: all .3s linear;
            }
            &.hide{
                transform: translateY(-100%);
                opacity: 0;
                transition: all .3s linear;
            }
        }
        .nav-avatar{
            display: flex;
            align-items: center;
            cursor: pointer;
            .nav-avatar-name{
                margin-left: 10px;
                color: #1890FF;
                font-weight: bold;
                font-size: 22px;
                font-family: webfont;
            }
            &.show{
                opacity: 1;
                transition: all .3s linear;
            }
            &.hide{
                opacity: 0;
                transition: all .3s linear;
            }
        }
        .nav{
            display: flex;
            align-items: center;
            margin: 0 24px;
            @media (max-width: 1200px) {
                display: none;
            }
            &.show{
                opacity: 1;
                transition: all .3s linear;
            }
            &.hide{
                opacity: 0;
                transition: all .3s linear;
            }
            span{
                display: inline-block;
                height: 100%;
                line-height: 60px;
                padding: 0 16px;
                color: ${props=>props.theme.navTextColor};
                font-size: 15px;
                cursor: pointer;
                position: relative;
                &::before{
                    content: '';
                    position: absolute;
                    bottom: 18px;
                    left: 14px;
                    height: 10px;
                    z-index: -1;
                    width: calc(100% - 32px);
                    background: transparent;
                    transition: background .3s;
                }
                &.active{
                    &::before{
                        content: '';
                        position: absolute;
                        bottom: 18px;
                        left: 14px;
                        height: 10px;
                        z-index: -1;
                        width: calc(100% - 32px);
                        background: ${props=>props.theme.navTextBgColor};
                    }
                }
                &:hover{
                    &::before{
                        content: '';
                        position: absolute;
                        bottom: 18px;
                        left: 14px;
                        height: 10px;
                        z-index: -1;
                        width: calc(100% - 32px);
                        background: ${props=>props.theme.navTextBgColor};
                        transition: background .3s;
                    }
                }
            }
            .line{
                width: 1px;
                height: 12px;
                background: #ccc;
            }
        }
        .header-center{
            @media (max-width: 1200px) {
                display: none;
            }
            &.show{
                opacity: 1;
                transition: all .3s linear;
            }
            &.hide{
                opacity: 0;
                transition: all .3s linear;
            }
        }
        .user-state{
            margin-left: 32px;
            cursor: pointer;
            .username{
                color: ${props=>props.theme.usernameColor};
            }
            .login{
                cursor: pointer;
                color: #1890ff;
            }
        }
    }
`

export const Content = styled.div`
    max-width: 1152px;
    min-height: 570px;
    margin: 80px auto 20px;
    @media (max-width: 1200px) {
        margin-top: 50px;
        min-height: auto;
    }
`

export const Footer = styled.div`
    background-color: ${props=>props.theme.footerBg};
    padding: 12px 0;
    color: ${props=>props.theme.footerColor};
    font-size: 12px;
    margin-top: 60px;
    .beian{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 8px;
        a{
            color: ${props=>props.theme.footerColor};
            margin: 0 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                height: 16px;
                margin-right: 4px;
            }
        }
    }
`

export const ThemeContainer = styled.div`
    @media (max-width: 768px) {
        right: 60px;
    }
    @media (max-width: 480px) {
        right: 20px;
    }
    position: fixed;
    bottom: 110px;
    right: 100px;
    height: 40px;
    width: 40px;
    border-radius: 4px;
    background-color: rgb(16, 136, 233);
    color: white;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
`

export const CallBackContainer = styled.div`
    @media (max-width: 1200px) {
        display: none;
    }
    position: fixed;
    bottom: 170px;
    right: 100px;
    height: 40px;
    width: 40px;
    border-radius: 4px;
    background-color: rgb(16, 136, 233);
    color: white;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
`